<template>

  <div class="order-main">
    <div class="header-container">
            <h1>{{ OrderName }}号包间</h1>
        </div>
    <el-table
        stripe
        border
        :data="orderData"
        class="global-table"
        style="width: 100%;overflow: auto;">
      <el-table-column
          align="center"
          class-name="first-column"
          prop="id"
          label="订单号">
      </el-table-column>
      <el-table-column
          align="center"
          prop="roomName"
          label="房间号">
      </el-table-column>
      <el-table-column
          align="center"
          prop="pay"
          label="付款价格">
      </el-table-column>
      <el-table-column
          align="center"
          prop="status"
          label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==0" type="danger">未支付</el-tag>
          <el-tag v-if="scope.row.status==1" >已支付</el-tag>
          <el-tag v-if="scope.row.status==-1" type="info">已取消</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="createTime"
          label="下单时间">
      </el-table-column>
      <el-table-column
          label="操作"
          width="300"
          align="center">
        <template slot-scope="scope">
          <el-button
              type="primary"
              @click="handleDelete(scope.$index, scope.row)">结算账单
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="消费项目" :visible.sync="dialogTableVisible" width=30%>
    <el-table :data="project">
      <el-table-column property="name" label="项目" min-width=10%></el-table-column>
      <el-table-column property="amount" label="单价" min-width=10%></el-table-column>
      <el-table-column property="count" label="次数" min-width=10%></el-table-column>
      <el-table-column property="totalPrices" label="总价(元)" min-width=10%><template slot-scope="scope">
      <span style="color: red; font-weight: bold;">
        {{ scope.row.totalPrices }}
      </span>
    </template></el-table-column>
    </el-table>
</el-dialog>
<el-drawer 
      direction="ltr"
      :append-to-body="true"
      :modal-append-to-body="false"
        title="我是标题"
        :visible.sync="drawer"
        :with-header="false">
        <div >
      <el-card >
      <div slot="header" class="clearfix">
        <span style="font-size: 24px; font-weight: bold; ">下单项目</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <el-table
    :data="filteredOptions"
    :row-class-name="rowStyle"
    stripe
    style="width: 100%">
    <el-table-column
      prop="name"
      label="消费名称"
      min-width=13% >
    </el-table-column>
    <el-table-column
      prop="count"
      label="次数"
      min-width=10%>
    </el-table-column>
    <el-table-column
      prop="totalPrices"
      label="价格(元)"
      min-width=10%>
    </el-table-column>
  </el-table>
</el-card>
<div ></div>
<br >
<el-form :inline="true" :model="numberForm" ref="numberForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="会员卡">
    <el-input v-model="numberForm.mobile" placeholder="请输入会员卡"  ></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit('numberForm')">查询</el-button>
  </el-form-item>
</el-form>
<el-table
    :data="member"
    stripe
    style="width: 100%">
    <el-table-column
      prop="name"
      label="会员名"
      min-width=8% >
    </el-table-column>
    <el-table-column
      prop="mobile"
      label="手机号"
      min-width=11%>
    </el-table-column>
    <el-table-column
      prop="userMoney"
      label="余额"
      min-width=8%>
    </el-table-column>
    <el-table-column
      label="操作"
      min-width="15%"
    >
  <template slot-scope="scope">
    <!-- 添加操作按钮 -->
    <el-radio
          v-model="selectedRow"
          :label="scope.row.id"
          :class="{ 'is-checked': selectedRow === scope.row.id }"
          @change="handleRadioChange(scope.row)"
        >选择</el-radio>
  </template>
</el-table-column>
  </el-table>
  <br>
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="消费金额"
    prop="amount"
    :rules="[
      { required: true, message: '消费金额不能为空'},
      { type: 'number', message: '消费金额必须为数字值'}
    ]"
  >
    <el-input v-model.number="numberValidateForm.amount" autocomplete="off" style="width: 80%;" ></el-input>
  </el-form-item>
    <el-form-item label="付款方式">
    <el-select v-model="numberValidateForm.payMethod" placeholder="请选择付款方式" style="width: 80%;"  >
      <el-option label="现金" value="现金"></el-option>
      <el-option label="扫码" value="扫码"></el-option>
      <el-option label="会员卡扣款" value="会员卡扣款"></el-option>
      <el-option label="组合支付" value="组合支付"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="备注">
    <el-input v-model="numberValidateForm.msg" style="width: 80%;"></el-input>
  </el-form-item>
  <br> 
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm')" style="width: 80%;" >提交</el-button>
  </el-form-item>
</el-form>
    </div>
      </el-drawer>
    <!-- 分页器 -->
    <el-pagination
        class="mt-10 mb-10"
        background
        @current-change="handleCurrentChange"
        @prev-click="prevPage"
        @next-click="nextPage"
        layout="prev, pager, next"
        :total="pageNum">
    </el-pagination>


    <!-- 弹出框 -->
    <!--<el-dialog-->
    <!--:title="title"-->
    <!--:visible.sync="dialogVisible"-->
    <!--width="570px">-->
    <!--<div class="contont">-->
    <!--<div class="d-flex align-items-center mb-15">-->
    <!--<p class="w-100 text-left">名称:</p>-->
    <!--<el-input-->
    <!--style="width: 350px;"-->
    <!--placeholder="请输入床的名称"-->
    <!--v-model="bedName"-->
    <!--clearable>-->
    <!--</el-input>-->
    <!--</div>-->
    <!--<div class="d-flex align-items-center mb-15">-->
    <!--<p class="w-100 text-left">规格:</p>-->
    <!--<el-input-->
    <!--style="width: 350px;"-->
    <!--placeholder="请输入床的规格"-->
    <!--v-model="bedSpec"-->
    <!--clearable>-->
    <!--</el-input>-->
    <!--</div>-->
    <!--<div class="d-flex align-items-center mb-15">-->
    <!--<p class="w-100 text-left">最大容量:</p>-->
    <!--<el-input-number-->
    <!--v-model="num"-->
    <!--:min="1"-->
    <!--:max="6">-->
    <!--</el-input-number>-->
    <!--</div>-->
    <!--<div class="d-flex align-items-center mb-15">-->
    <!--<p class="w-100 text-left">硬度:</p>-->
    <!--<div>-->
    <!--<el-radio v-model="bedStatus" label="1">软</el-radio>-->
    <!--<el-radio v-model="bedStatus" label="0">硬</el-radio>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<span slot="footer" class="dialog-footer">-->
    <!--<el-button @click="dialogVisible = false">取 消</el-button>-->
    <!--<el-button type="primary" @click="confirm">确 定</el-button>-->
    <!--</span>-->
    <!--</el-dialog>-->

  </div>

</template>

<script>
import {get, post,reqFuc} from "../utils/request";
import axios from 'axios'

export default {
  name: "OrderManage",
  data() {
    return {
      selectedRow: null,
      numberValidateForm: {
         orderId:"",
          msg:"",
          vipId:"",
          amount: '',
          payMethod:'',
          mobile:"",
        },
      member:[],
      direction: 'ltr',
      numberForm: {
          mobile:"",
        },
      filteredOptions:[],
      drawer: false,
      floor:"",
      OrderName:"",
      project:[],
      dialogTableVisible: false,
      pageNum: 0,
      orderData: [],
      dialogVisible: false,
      statusOptions: [{
        value: '0',
        label: '未支付'
      }, {
        value: '1',
        label: '已支付'
      }, {
        value: '-1',
        label: '已取消'
      }],
      roomTypeOptions: [],
      searchParams: {
        dateRange: undefined,
        beginTime: undefined,
        endTime: undefined,
        roomType: undefined,
        province: undefined
      }
    }
  },
  watch: {
    "searchParams.dateRange"(val, oldVal){//普通的watch监听
      console.log("a: "+val, oldVal);

      if (val) {
        // let split = val.toString().split(',');

        this.searchParams.beginTime = val[0]
        this.searchParams.endTime = val[1]
      }
      console.log("type: ",typeof(this.searchParams.beginTime))
      console.log("beginTime: ",this.searchParams.beginTime);
      console.log("endTime: ",this.searchParams.endTime);

    },
  },
  created:function(){
             this.OrderName =this.$route.params.name;
             this.floor=this.$route.params.floor;
            },
  methods: {
    handleRadioChange(row) {
      this.selectedRow = row.id; // 将选中行的数据赋值给 selectedRow
      console.log('当前选择的行：', row);
      this.numberValidateForm.vipId=this.selectedRow
      // 在这里执行你的具体业务逻辑
    },
    rowStyle({row, rowIndex}){
    if(rowIndex === this.filteredOptions.length - 1){
      return 'success_class';
    }
  },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            let data={
              "mobile":this.numberForm.mobile
            }
            post('/api/member/selectId', data)
             .then(res => {
              if (res.data.code === '200') {
              this.member=res.data.data
          }
          })
          .catch(err => {
            console.log(err);
          })
            console.log(data)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data={
              "mobile":this.numberValidateForm.mobile,
              "payMethod":this.numberValidateForm.payMethod,
              "vipId":this.numberValidateForm.vipId,
              "msg":this.numberValidateForm.msg,
              "orderId":this.numberValidateForm.orderId,
              "amount":this.numberValidateForm.amount
            }
            post('/api/order/end', data)
             .then(res => {
              if (res.data.code === '200') {
                this.$message({
              message: '支付成功',
              type: 'success',
              duration: 2000
            });
              this.$router.push({
              path:"roomManage",
              name:"roomManage",
              })
          }
          })
          .catch(err => {
            console.log(err);
          })
            console.log(data)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    download() {
      let data = {
        page: {
          page: 1,
          size: 9999999
        },
        roomType: this.searchParams.roomType,
        beginTime: this.searchParams.beginTime,
        endTime: this.searchParams.endTime,
        province: this.searchParams.province
      }

      reqFuc(data)
          .then( res => {
              console.log(res);
              // let blob = new Blob([res.data],{type: 'application/vnd.ms-excel;charset=utf-8'});
              //
              // if (!!window.ActiveXObject || "ActiveXObject" in window) {
              //     window.navigator.msSaveOrOpenBlob(blob, 'fileName');
              // } else {
              //     const link = document.createElement('a');
              //     link.style.display = 'none';
              //     link.href = URL.createObjectURL(blob);
              //     link.setAttribute('download', 'fileName');
              //     document.body.appendChild(link);
              //     link.click();
              //     document.body.removeChild(link);
              // }

              const aLink = document.createElement('a')
              var blob = new Blob([res.data], { type: 'mimeMap.xlsx' })
              // //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
              var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
              var contentDisposition = decodeURI(res.headers['content-disposition'])
              var result = patt.exec(contentDisposition)
              var fileName = result[1]
              fileName = fileName.replace(/\"/g, '')
              aLink.href = URL.createObjectURL(blob)
              aLink.setAttribute('download', fileName) // 设置下载文件名称
              document.body.appendChild(aLink)
              aLink.click()
              document.body.appendChild(aLink)
          })
          .catch( err => {
              console.log(err);
          })


    },
    reset() {
      this.searchParams = {
            dateRange: undefined,
            beginTime: undefined,
            endTime: undefined,
            roomType: undefined
      }
    },
    getRoomTypeList() {
      let data = {
        page:{
          page: 1,
          size: 999999
        },
      }
      post("api/roomType/page",data).then(res => {
        this.roomTypeOptions = res.data.data.records
        console.log("this.roomTypeOptions",this.roomTypeOptions)
      })
    },
    getOrderList() {
      let data = {
        name: this.OrderName,
        floor: this.floor
      }
      this.orderListRequest(data)
    },
    //
    orderListRequest(data) {
      post('/api/order/floor', data)
          .then(res => {
            console.log(res);
            this.orderData = res.data.data.records
            this.pageNum = res.data.data.total
          })
          .catch(err => {
            console.log(err);
          })
    },

    //选择页码
    handleCurrentChange(num) {
      let data = {
        page: {
          page: num,
          size: 10
        },
        roomType: this.searchParams.roomType,
        beginTime: this.searchParams.beginTime,
        endTime: this.searchParams.endTime,
        province: this.searchParams.province
      }
      this.orderListRequest(data)
    },

    //上一页
    prevPage(num) {
      let data = {
        page: {
          page: num,
          size: 10
        },
        roomType: this.searchParams.roomType,
        beginTime: this.searchParams.beginTime,
        endTime: this.searchParams.endTime,
        province: this.searchParams.province
      }
      this.orderListRequest(data)

    },

    //下一页
    nextPage(num) {
      let data = {
        page: {
          page: num,
          size: 10
        },
        roomType: this.searchParams.roomType,
        beginTime: this.searchParams.beginTime,
        endTime: this.searchParams.endTime,
        province: this.searchParams.province
      }
      this.orderListRequest(data)
    },
    //删除床方法
    handleDelete(index, row) {
     let data={
          "orderId":row.id,
        }
        console.log(data)
       post('/api/order/projectId', data)
          .then(res => {
            this.filteredOptions=res.data.data
            this.numberValidateForm.orderId=row.id
          })
          .catch(err => {
            console.log(err);
          })
          this.drawer = true

      // this.$router.push({
      //   path:"Floorplace",
      //   name:"Floorplace",
      //   params:{
      //       id:row.id,
      //       name:this.OrderName
      //   }
      // })

      // get('/api/order/project/' + row.id)
      //     .then(res => {
      //       console.log(res);
      //       if (res.data.code == 200) {
      //          this.project=res.data.data
      //          this.dialogTableVisible=true
      //       }
      //     })
      //     .catch(err => {
      //       console.log(err);
      //     })
    },
      dateFormatter(val){
          // console.log(val.createTime);
          var d = new Date(val.createTime);

          var year = d.getFullYear();       //年
          var month = d.getMonth() + 1;     //月
          var day = d.getDate();            //日

          var hh = d.getHours();            //时
          var mm = d.getMinutes();          //分
          var ss = d.getSeconds();           //秒

          var clock = year + "/";

          if (month < 10)
              clock += "0";

          clock += month + "/";

          if (day < 10)
              clock += "0";

          clock += day + " ";

          if (hh < 10)
              clock += "0";

          clock += hh + ":";
          if (mm < 10) clock += '0';
          clock += mm + ":";

          if (ss < 10) clock += '0';
          clock += ss;
          return (clock);
      }

  },
  mounted() {
    this.getOrderList()
  }
}
</script>

<style scoped>
.is-checked {
  /* 添加选中时的样式 */
  border-color: #409EFF;
  background-color: #f5f7fa;
}
  .header-container {
  width: 100%;
  text-align: center; /* 设置文本居中 */
  font-size: 25px;
}
.order-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-width: 1000px;
  height: 100%;
  background: #FFFFFF;
  box-shadow: 0px 5px 30px 0px rgba(22, 115, 255, 0.1);
}

.search {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0 10px;
  font-size: 14px;
  white-space: nowrap;
}
</style>